<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>农产品价格可视化系统</title>
        <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/popper.js/1.12.9/popper.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
        <!-- <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/layout.css') }}"> -->
        <style type="text/css">
        @media (max-width: 991px) {
            .navbar-header {
                float: none;
            }
            .navbar-left,
            .navbar-right {
                float: none !important;
            }
            .navbar-toggle {
                display: block;
            }
            .navbar-collapse {
                border-top: 1px solid transparent;
                box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
            }
            .navbar-fixed-top {
                top: 0;
                border-width: 0 0 1px;
            }
            .navbar-collapse.collapse {
                display: none!important;
            }
            .navbar-nav {
                float: none!important;
                margin-top: 7.5px;
            }
            .navbar-nav>li {
                float: none;
            }
            .navbar-nav>li>a {
                padding-top: 10px;
                padding-bottom: 10px;
            }
            .collapse.in {
                display: block !important;
            }
        }

        .navbar-default .navbar-brand,
        .navbar-default .navbar-nav>li>a,
        .navbar-default .navbar-nav>li>a:hover,
        .navbar-default .navbar-nav>li>a:visited,
        .navbar .navbar-brand:hover {
            color: #fff;
        }

        .navbar-default .navbar-nav>li {
            margin-right: 4px;
        }

        .container-fluid>.navbar-header {
            margin-right: 40px;
            margin-left: 0;
        }

        .navbar-form {
            margin-left: 30px;
        }

        .bdt {
            width: 0;
            position: absolute;
            top: 0;
            left: 50%;
            background-color: #fff;
            height: 2px;
            transition: all .3s ease-out;
        }

        a:hover .bdt {
            width: 100%;
            left: 0;
            transition: all .3s ease-out;
        }

        
        </style>
        <style type="text/css">
.navbar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: transparent;
    /*背景颜色透明*/
    border-bottom: 1px solid hsla(0, 0%, 50%, .1);
}


.navbar-default .navbar-nav>li>a.active .bdt {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 2px;
    background-color: #fff;
}

.sec1 a.cus-a {
    display: block;
    padding: 20px 0 20px 45px;
    text-decoration: none;
    color: #333;
}

.sec1 i.cus-icon {
    position: absolute;
    left: 15px;
    top: 30px;
    color: #57b231;
    transition: top .3s;
}

.sec1 a:hover i.cus-icon {
    top: 25px;
    transition: top .3s;
}

.sec1 a.cus-a:hover p {
    color: #333;
}

.sec1 a.cus-a h3 {
    font-size: 16px;
    margin: 10px 0;
    text-overflow: ellipsis;
    /*省略符合修剪文字*/
    white-space: nowrap;
    word-wrap: break-word;
}

.sec1 a.cus-a p {
    margin: 0;
    color: #9b9ea0;
}

.sec1 div.menu {
    border: 1px solid transparent;
    border-left-color: #eee;
    border-right-color: #eee;
}

.sec1 {
    border-bottom: 1px #eee solid;
}

.sec2,
.sec3 {
    margin-top: 80px;
}

.font-30 {
    font-size: 30px;
}

.sec2 .container {
    margin-top: 30px;
}

.sec3 .font-30 {
    margin-bottom: 50px;
}

.topic-title {
    padding-top: 15px;
    padding-bottom: 11px;
    font-size: 24px;
    text-decoration: none;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

.topic-body {
    background-color: #faf3eb;
    padding: 20px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
}

.sec2 div.col-md-4 a,
.sec3 div.col-md-2 a {
    text-decoration: none;
    color: #000;
    display: block;
}

.sec2 div.col-md-4 a {
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
}

.sec3 div.col-md-2 a {
    position: relative;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .08);
    display: block;
    padding: 30px 0;
    margin: 4px 0;
    border: 1px solid #ddd;
    text-decoration: none;
    /*transition: all .3s;*/
    overflow: hidden;
}

.sec2 div.col-md-4 a:hover {
    box-shadow: 0px 0px 9px #333;
}

.sec2 .offse {
    margin-bottom: 20px;
}

.sec2 .color1 {
    background-color: #ffda75;
}

.sec2 .color2 {
    background-color: #ffbea1;
}

.sec2 .color3 {
    background-color: #ade1f3;
}

div.content {
    font-size: 16px;
    margin-top: 30px;
    word-wrap: break-word;
    color: #1b1b1b;
}

div.cus-block {
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 20px;
}

div.data-nums {
    margin-top: 15px;
    font-size: 24px;
}

div.data-nums .unit {
    font-size: 16px;
}

div.data-more {
    margin-top: 15px;
    font-size: 16px;
    color: #fff;
}

.sec3 .row a:hover .data-more {
    color: #9b9ea0;
}

.sec3 .yellow {
    color: #f5a800;
}

.sec3 .purple {
    color: #a85bad;
}

.sec3 .light-blue {
    color: #61a6da;
}

.sec3 .red {
    color: #dc4525;
}

.sec3 .blue {
    color: #5358ae;
}

.sec3 .green {
    color: #92c800;
}

.sec3 {
    margin-bottom: 40px;
}

.footer {
    margin-top: 60px;
    padding-top: 50px;
    color: #768395;
    background-color: #2b3139;
    /* 备选背景色  #C7C7C7*/
}

.footer .copyright {
    padding: 30px 0;
    width: 100%;
    color: #fff;
    text-align: center;
    text-decoration: none;
}
.footer li{
    text-decoration: none;
    list-style:none;
    
}
.footer .copyright a:hover {
    color: #24597F;
}
.footer .copyright a{
    text-decoration: none;
    margin: 0 4px;
}
.footer .index-title{
    margin:10px 0;
    font-size: 16px;
}
.index-p div ul>li{
margin:20px;
padding:0 10px;
}
.footer .index-wrap div.row{
    margin: 30px;
}

/*平台数据*/
</style>
		
    </head>

    <body>
        <nav class="navbar navbar-default navbar-static-top" role="navigation">
            <div class="container-fluid">
                <div class="row">
                    <div class="navbar-header col-md-3">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nn-navbar-collapse">
                            <span class="sr-only">切换导航</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand " href="#">农产品价格可视化系统</a>
                    </div>
                    <div class="collapse navbar-collapse col-md-6" id="nn-navbar-collapse">
                        <ul class="nav navbar-nav navbar-left ">
                            <li><a class="active" href="#">
                        <span class="bdt"></span>首页</a></li>
                            <li><a href="#"><span class="bdt"></span>数据资源</a></li>
                            <li><a href="#"><span class="bdt"></span>填充数据2</a></li>
                            <li><a href="#"><span class="bdt"></span>填充数据3</a></li>
                        </ul>
                        <form class="nav navbar-form navbar-left " role="search">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="请输入查找内容">
                            </div>
                            <button type="submit" class="btn btn-default" style="background-color: transparent;color: white;">搜索</button>
                            <!-- <button type="button" class="btn btn-default "></button> -->
                        </form>
                    </div>
                </div>
            </div>
        </nav>
        <div class="main">
            
			
			<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000">
				<!-- 轮播（Carousel）指标 -->
				<ol class="carousel-indicators">
					<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
					<li data-target="#myCarousel" data-slide-to="1"></li>
				</ol>
				<div class="carousel-inner" role="listbox">
					<div class="item active">
						<img src="img/img_01.jpg" alt="First slide">
						<div class="carousel-caption"></div>
					</div>
					<div class="item">
						<img src="img/img_02.jpg" alt="Second slide">
						<div class="carousel-caption"></div>
					</div>
				</div>
				<a class="carousel-control left" href="#myCarousel" data-slide="prev" role="button">
				   <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
				   <span class="sr-only">Previous</span>
				</a>
				<a class="carousel-control right" href="#myCarousel" data-slide="next" role="button">
					<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
					<span class="sr-only">Next</span>
				</a>
			</div>
			<section class="sec1">
				<div class="container">
					<div class="row">
						<div class="col-md-3 menu">
							<a href="" class="cus-a">
							  <i class="fa fa-fw fa-2x fa-database cus-icon"></i>
							  <h3>老乡app</h3>
							  <p>涉及农业领域的产业、产品、政策、技术、资讯、市场、专家、环境、标准等几十种数据</p>
						  </a>
						</div>
						<div class="col-md-3 menu">
							<a href="" class="cus-a">
							  <i class="fa fa-fw fa-2x fa-database cus-icon"></i>
							  <h3>数据资源</h3>
							  <p>涉及农业领域的产业、产品、政策、技术、资讯、市场、专家、环境、标准等几十种数据</p>
						  </a>
						</div>
						<div class="col-md-3 menu">
							<a href="" class="cus-a">
							  <i class="fa fa-fw fa-2x fa-database cus-icon"></i>
							  <h3>专题应用</h3>
							  <p>涉及农业领域的产业、产品、政策、技术、资讯、市场、专家、环境、标准等几十种数据</p>
						  </a>
						</div>
						<div class="col-md-3 menu">
							<a href="" class="cus-a">
							  <i class="fa fa-fw fa-2x fa-database cus-icon"></i>
							  <h3>农场地图</h3>
							  <p>涉及农业领域的产业、产品、政策、技术、资讯、市场、专家、环境、标准等几十种数据</p>
						  </a>
						</div>
					</div>
				</div>
			</section>
			<section class="sec2">
				<div class="font-30 text-center">
					<i class="margin-r-10">
						<img src="img/icon-zt.png">
					</i> 可视化专题
				</div>
				<div class="container ">
					<div class="row text-center">
						<div class="col-md-4 col-xs-6 offse">
							<a href="">
								<div>
									<div class="topic-title color1">农业环境监控</div>
									<div class="topic-body"><img src="img/zt1.gif" ></div>
								</div>
							</a>
						</div>
						<div class="col-md-4 col-xs-6 offse">
							<a href="">
								<div>
									<div class="topic-title color2">农业环境监控</div>
									<div class="topic-body"><img src="img/zt2.gif" style="width: 100%;"></div>
								</div>
							</a>
						</div>
						<div class="col-md-4 col-xs-6 offse">
							<a href="">
								<div>
									<div class="topic-title color3">农业环境监控</div>
									<div class="topic-body"><img src="img/zt3.gif" style="width: 100%" </div>
									</div>
							</a>
							</div>
						</div>
					</div>
			</section>
			<section class="sec3">
				<div class="font-30 text-center">
					<i class="margin-r-10">
						<img src="img/icon-pt.png">
					</i> 平台数据
				</div>
				<div class="container">
					<div class="row text-center ">
						<div class="col-md-2 col-xs-6 col-sm-4 cus-block">
							<a href="#" target="_blank">
								<div class="text-center">
									<img src="img/data1.png">
								</div>
								<div class="content">专家数据</div>
								<div class="data-nums">
									<span class="yellow" id="expertCount">928</span><span class="unit"> 条</span>
								</div>
								<div class="data-more">查看更多</div>
							</a>
						</div>
						<div class="col-md-2 col-xs-6 col-sm-4 cus-block">
							<a href="#" target="_blank">
								<div class="text-center">
									<img src="img/data3.png">
								</div>
								<div class="content">植物品种权</div>
								<div class="data-nums">
									<span class="purple" id="plantBreedCount">1156</span><span class="unit"> 条</span>
								</div>
								<div class="data-more">查看更多</div>
							</a>
						</div>
						<div class="clearfix visible-xs"></div>
						<div class="col-md-2 col-xs-6 col-sm-4 cus-block">
							<a href="#" target="_blank">
								<div class="text-center">
									<img src="img/data5.png">
								</div>
								<div class="content">涉农专利信息</div>
								<div class="data-nums">
									<span class="light-blue" id="patentCount">1593189</span><span class="unit"> 条</span>
								</div>
								<div class="data-more">查看更多</div>
							</a>
						</div>
						<div class="clearfix visible-sm"></div>
						<div class="col-md-2 col-xs-6 col-sm-4 cus-block">
							<a href="#" target="_blank">
								<div class="text-center">
									<img src="img/data2.png">
								</div>
								<div class="content">涉农科技成果</div>
								<div class="data-nums">
									<span class="green" id="scienceHarvestCount">22052</span><span class="unit"> 条</span>
								</div>
								<div class="data-more">查看更多</div>
							</a>
						</div>
						<div class="clearfix visible-xs"></div>
						<div class="col-md-2 col-xs-6 col-sm-4 cus-block">
							<a href="#" target="_blank">
								<div class="text-center">
									<img src="img/data4.png">
								</div>
								<div class="content">现代农业科技服务体系</div>
								<div class="data-nums">
									<span class="blue" id="natureCount">211</span><span class="unit"> 条</span>
								</div>
								<div class="data-more">查看更多</div>
							</a>
						</div>
						<div class="col-md-2 col-xs-6 col-sm-4 cus-block">
							<a href="#" target="_blank">
								<div class="text-center">
									<img src="img/data6.png">
								</div>
								<div class="content">培训数据</div>
								<div class="data-nums">
									<span class="red" id="productPriceCount">9442</span><span class="unit"> 条</span>
								</div>
								<div class="data-more">查看更多</div>
							</a>
						</div>
					</div>
				</div>
				</div>
			</section>
			
			
			
			
        </div>
        <div class="footer">
					<div class="index-warp container">
						<div class="row text-center">
							<div class="col-md-3 col-md-offset-38"><!--col-md-offset-38*/-->
								<div class="index-title">数据分享	</div>
								
								<ul>
									<li>数据资源</li>
									<li>数据产品</li>
									<li>数据分布</li>
								</ul>
							
							</div>
							<div class="col-md-3">
								<div class="index-title">平台服务</div>
								
								<ul>
									<li>需求发布</li>
									<li>服务网络</li>
									<li>问题咨询</li>
								</ul>
							</div>
							<div class="col-md-3">
								<div class="index-title">共享动态</div>
							
								<ul>
									<li>工作动态</li>
									<li>共享研究</li>
									<li>科技动态</li>
									
								</ul>
							</div>
							<div class="col-md-3 ">
								<div class="index-title">会员中心</div>
							
								<ul>
									<li>注册会员</li>
									<li>专家与团队</li>
									<li>关于我们</li>
								
								</ul>
							</div>
						</div>
					</div>
					<div class="copyright">Copyright © 2018 <a href='#' target="_blank">为米</a>. All Rights Reserved.</div>

        </div>
    </body>

</html>